<template>
  <div class="header" @mouseenter="Enter" @mouseleave="Leave">
    <swiper class="swiper"
    ref="mySwiper"
    :options="swiperOption"
    v-if="imgSrc.length"
    :style="{width: sWidth, height: sHeight}"
    >
    <swiper-slide
    v-for="(item, index) in imgSrc"
    :key="index">
      <img :src="imgSrc[index]" alt="轮播图">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 隐藏左右箭头
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
  </div>
</template>

<script>

// let that = this
export default {
  props: {
    // 图片地址，数组形式
    img_src: {
      type: Array,
      required: true
    },
    // 轮播图的宽度
    width: {
      type: String,
      default: '100%'
    },
    // 轮播图的高度
    height: {
      type: String,
      default: '100%'
    }
  },
  computed: {
    imgSrc() {
      return this.img_src
    },
    sWidth() {
      return this.width
    },
    sHeight() {
      return this.height
    },
  },
  data() {
      return {
        swiperOption: {
          slidesPerView: 1,
          grabCursor : true,
          // spaceBetween: 0, // 两张图片间距为 0
          loop: true,
          autoplay: {
            delay: 3000, // 2秒切换一次
            // stopOnLastSlide: false,
            disableOnInteraction: false, // 触摸滑动后是否继续轮播
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on: {
            click() {
              console.log(this.realIndex)
              this.autoplay.stop()
              // 把轮播图里面的下标传递到 vue 实例中去
              // that = this.realIndex
            },
          },
        }
      }
    },
    methods: {
      Enter() {
          this.$refs.mySwiper.swiperInstance.autoplay.stop()
      },
      Leave() {
          this.$refs.mySwiper.swiperInstance.autoplay.start()
      }
    }
};
</script>

<style scoped lang="scss">
.swiper {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
